簡(jiǎn)介：在網(wǎng)頁中傳統(tǒng)的照片查看一直是網(wǎng)格-列表，現(xiàn)在我們可以突破這種限制，獲得和現(xiàn)實(shí)中一樣的自由。隨意擺放的照片，超酷的切換動(dòng)畫；還能翻開照片，查看圖片簡(jiǎn)介。
本課程主要有兩個(gè)部分；前半部分以原理分析和前端界面實(shí)現(xiàn)為主，后半部分則是腳本來處理的一些特效與總結(jié)。
第1章 前期準(zhǔn)備
介紹了這個(gè)案例在現(xiàn)實(shí)生活中的原型，以及在其他的應(yīng)用程序中的應(yīng)用，同時(shí)還介紹了一種通用的分析方法，從 “VCD” 的角度去分析一個(gè)案例的實(shí)現(xiàn)。
第2章 前端界面
介紹了特效的源碼結(jié)構(gòu)，以及所需的素材。接著根據(jù)前期準(zhǔn)備中介紹的 “V”（VIEW），把案例中所需要的界面素材全部編寫出來。其中用 CSS 編寫了大部分的視覺效果，以及對(duì)應(yīng)特效的基本動(dòng)作。并且通過瀏覽器開發(fā)工具，用手動(dòng)切換的方式驗(yàn)證了3D切換的視覺動(dòng)作特效。
第3章 JS腳本編寫
介紹了這個(gè)案例中的“D”（DATA）數(shù)據(jù)部分，同時(shí)通過改造之前的 VIEW，通過一個(gè)函數(shù)把所有的海報(bào)的 HTML 通過腳本的形式生成并輸出。然后通過一個(gè)隨機(jī)數(shù)的算法，隨機(jī)選中一個(gè)海報(bào)作為當(dāng)前選中展現(xiàn)的海報(bào)。再接著通過計(jì)算左右分區(qū)的范圍，把剩余的海報(bào)的位置和角度也隨機(jī)分配了出去。最后結(jié)合“前端界面”部分中的翻轉(zhuǎn)控制，完整實(shí)現(xiàn)了控制按鈕的輸出、翻轉(zhuǎn)控制、以及自身的翻轉(zhuǎn)特效。
第4章 優(yōu)化與總結(jié)
介紹了通過一些簡(jiǎn)單的樣式調(diào)整，使得整個(gè)特效的動(dòng)作更加流暢，然后講解了如何去兼容Firefox瀏覽器，接著給出了一些思考，如何調(diào)整切換動(dòng)畫。最后對(duì)案例中用到的特殊 CSS 以及 JS 中的一些特別的方法進(jìn)行了總結(jié)。